<template>
 <div class="dinwei">
        <div class="personword">

        <div class="header">
          <div class="headerleft">
                <el-input
                size="mini"
                placeholder="请输入小说名"
                v-model="message"
                @change="getsearch1"
                clearable>
            </el-input>
          </div>

           <div class="headerright">
            <el-button size="mini" type="primary" @click="goputartcle">前往发表自己的作品</el-button>
          </div>
        </div>

        <div class="container">
             <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                    prop="bookname"
                    label="小说名"
                    width="240">
                    </el-table-column>
                    <el-table-column
                    prop="operation"
                    label="操作">
                      <template slot-scope="scope">
                       <el-button type="primary" icon="el-icon-menu" @click="getxiangqing(scope.row)">详情</el-button>
                       <el-button type="success" icon="el-icon-edit"  @click="xiugai(scope.row)">修改</el-button>
                       <el-button type="info" icon="el-icon-document-remove"  @click="zhangjie(scope.row)">章节</el-button>
                       <el-button type="danger" icon="el-icon-delete"  @click="sanchu(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
            </el-table>
        </div>
    </div>
 </div>
</template>
<script>
  export default {
    data() {
      return {
        message: '',
         tableData: [],
         authorid:0,
      }
    },
    created(){
        
        let user=JSON.parse(sessionStorage.getItem("user"))
        this.authorid=user.id
        // console.log(this.authorid)
        this.getallarticle()
    },
    methods:{
      //跳转到章节页面
      zhangjie(e){
        this.$router.push(`/book/${e.articleid}`)
      },

      //搜索文章
      async getsearch1(){
            let data=await this.axios.get(`article/articlesearch?message=${this.message}`)
            // console.log(data)
            this.tableData=data.data.data  
      },

      //删除文章功能
       sanchu(articledata){
        let articleid=articledata.articleid

         this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let data=await this.axios.get(`article/delbook?articleid=${articleid}`)   
          this.getallarticle()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        }); 
      },

      //修该文章功能
      xiugai(articledata){
          this.$router.push(`article/xiugai/${articledata.articleid}`)
      },

      //获取全部的作品
      async getallarticle(){
        let data=await this.axios.get(`article?authorid=${this.$store.state.readerdata.id}`)
        // console.log(data)
        this.tableData=data.data.data
      },

    //跳转到写作页面
    goputartcle(){
      this.$router.push("/articlecreate")
    }

    },
  }
</script>

<style scoped lang="less">
.dinwei{
     width:100%;
    height: calc(100vh - 100px);
    position: relative;
    .personword {
     width:800px;
        text-align: center;
        padding-top: 20px;
        background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
        border:2px solid #ccc;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        border-radius: 10px;
        .header {
            height:50px;
            display: flex;
          .headerleft {
              flex: 1;
              padding: 10px 40px;
              el-input {
                  
              }
            }

    .headerright {
        flex: 3;
        padding: 10px 20px;
      el-button {

      }
    }
  }
}
}

</style>

